<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="button" class="success" value="成功">
  <input type="button" class="error" value="错误">
  <input type="button" class="warning" value="警告">
  <input type="button" class="info" value="默认">
</body>
<script>

  const s = document.querySelector(".success");
  const e = document.querySelector(".error");
  const w = document.querySelector(".warning");
  const i = document.querySelector(".info");

  s.onclick = function(){
    toast({
      text: "恭喜你，成功啦",
      type: "success",
      autoClose: true,
      timeout: 5000,
      close:function(){
        console.log("成功弹出框已关闭")
      }
    })
  }
  
  e.onclick = function(){
    toast({
      text: "不好意思，失败了",
      type: "error",
      autoClose: false,
      close:function(){
        console.log("失败弹出框已关闭")
      }
    })
  }
  
  w.onclick = function(){
    toast({
      text: "注意：此处有隐患，但不影响功能执行",
      type: "warning"
    })
  }

  i.onclick = function(){
    const t1 = toast({
      text: "默认的信息提示"
    })
    const t2 = toast({
      text: "默认的信息提示"
    })
    console.log(t1 === t2)
  }



  // 分析：弹出框
  // 1. 创建（不存在）或选中（存在）元素
  // 2. 给元素设置通用样式：位置，大小，显示
  // 3. 根据参数配置不同颜色，内容
    // 成功：绿色
    // 失败：红色
    // 警告：橙色
    // 默认：灰色
    // 内容纯传参
  // 4. 根据参数决定关闭方式
    // 自动关闭：延时器
    // 手动关闭：点击事件
  // 5. 关闭时执行传入的功能

  // 设计：
  // const toast = (function(){
  //   // 1. 创建（不存在）或选中（存在）元素，并插入
  //   const obj = {};
  //   // 2. 给元素设置通用样式：位置，大小，显示
  //   // ...
  //   return function(ops){
  //     // 3. 根据参数配置不同颜色，内容
  //     // 4. 根据参数决定关闭方式
  //     // 5. 关闭时执行传入的功能
  //     return obj;
  //   }
  // })();

  // 编程：
  const toast = (function(){
    // 1. 创建（不存在）或选中（存在）元素，并插入
    const obj = {};
    // 2. 给元素设置通用样式：位置，大小
    obj.ele = document.createElement("dialog");
    document.body.appendChild(obj.ele);
    // 因为使用的html5新增的dialog标签，自带通用样式
    return function({text, type, autoClose=true, timeout=2000, close}){
      // 清除历史计时器
      clearTimeout(obj.t);
      // 显示
      obj.ele.style.display = "block";
      // 3. 根据参数配置不同颜色
      let color = "#ccc";
      switch(type){
        case "success": color = "green"; break;
        case "error": color = "red"; break;
        case "warning": color = "orange"; break;
        default: color = "#ccc";
      }
      obj.ele.style.borderColor = color;
      obj.ele.style.color = color;
      // 内容
      obj.ele.innerText = text;
      // 4. 根据参数决定关闭方式
      if(autoClose){
        // 自动关闭
        obj.t = setTimeout(()=>{
          obj.ele.style.display = "none";
          // 5. 关闭时执行传入的功能
          close && close();
        }, timeout);
      }else{
        // 点击关闭
        obj.ele.addEventListener("click", function(){
          obj.ele.style.display = "none";
          // 5. 关闭时执行传入的功能
          close && close();
        })
      }
      // 单例模式的返回
      return obj;
    }
  })();



  
</script>
</html>